<template>
  <div>
    <a-card>
      <a-form layout="inline" :form="searchForm" @submit="handleSearch">
        <a-form-item label="学年学期">
          <a-select
            v-decorator="['semester']"
            style="width: 200px"
            placeholder="请选择学年学期"
          >
            <a-select-option value="2022-2024-1">2022-2023学年第一学期</a-select-option>
            <a-select-option value="2022-2024-2">2022-2023学年第二学期</a-select-option>
            <a-select-option value="2024-2024-1">2024-2024学年第一学期</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="开课部门">
          <a-select
            v-decorator="['department']"
            style="width: 180px"
            placeholder="请选择部门"
          >
            <a-select-option value="all">全部部门</a-select-option>
            <a-select-option value="math">机电工程系</a-select-option>
            <a-select-option value="physics">建筑工程系</a-select-option>
            <a-select-option value="computer">信息工程系</a-select-option>
            <a-select-option value="foreign">机电工程系</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="评价类型">
          <a-select
            v-decorator="['type', { initialValue: 'all' }]"
            style="width: 150px"
          >
            <a-select-option value="all">全部评价</a-select-option>
            <a-select-option value="student">学生评价</a-select-option>
            <a-select-option value="supervisor">督导评价</a-select-option>
            <a-select-option value="leader">领导评价</a-select-option>
            <a-select-option value="peer">同行评价</a-select-option>
            <a-select-option value="self">教师自评</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item>
          <a-button type="primary" html-type="submit">
            查询
          </a-button>
          <a-button style="margin-left: 8px;" @click="handleReset">
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
    
    <a-card title="评价统计概览" style="margin-top: 24px;">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-card title="学生评价" :bordered="false">
            <div style="text-align: center;">
              <a-progress
                type="dashboard"
                :percent="85"
                :width="200"
                :stroke-color="getProgressColor(85)"
              />
              <p style="margin-top: 16px; font-size: 16px;">平均分: 85</p>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="督导评价" :bordered="false">
            <div style="text-align: center;">
              <a-progress
                type="dashboard"
                :percent="78"
                :width="200"
                :stroke-color="getProgressColor(78)"
              />
              <p style="margin-top: 16px; font-size: 16px;">平均分: 78</p>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="综合评分" :bordered="false">
            <div style="text-align: center;">
              <a-progress
                type="dashboard"
                :percent="82"
                :width="200"
                :stroke-color="getProgressColor(82)"
              />
              <p style="margin-top: 16px; font-size: 16px;">平均分: 82</p>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    
    <a-card title="详细统计" style="margin-top: 24px;">
      <a-tabs defaultActiveKey="1">
        <a-tab-pane key="1" tab="按教师统计">
          <teacher-statistics />
        </a-tab-pane>
        <a-tab-pane key="2" tab="按课程统计">
          <course-statistics />
        </a-tab-pane>
        <a-tab-pane key="3" tab="按部门统计">
          <department-statistics />
        </a-tab-pane>
        <a-tab-pane key="4" tab="对比分析">
          <compare-analysis />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import TeacherStatistics from './modules/TeacherStatistics'
import CourseStatistics from './modules/CourseStatistics'
import DepartmentStatistics from './modules/DepartmentStatistics'
import CompareAnalysis from './modules/CompareAnalysis'

export default {
  components: {
    TeacherStatistics,
    CourseStatistics,
    DepartmentStatistics,
    CompareAnalysis
  },
  beforeCreate() {
    this.searchForm = this.$form.createForm(this, { name: 'search_form' })
  },
  methods: {
    getProgressColor(percent) {
      if (percent >= 90) return '#52c41a'
      if (percent >= 80) return '#1890ff'
      if (percent >= 70) return '#faad14'
      if (percent >= 60) return '#ff7a45'
      return '#f5222d'
    },
    handleSearch(e) {
      e.preventDefault()
      this.searchForm.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          // 这里应该触发数据查询
        }
      })
    },
    handleReset() {
      this.searchForm.resetFields()
    }
  }
}
</script>